<template>
  <div id="category">
    <div class="line-10"></div>
    <dl>
      <dt><i class="el-icon-third-category mr-5"></i><span class="bold">分类专栏</span></dt>
      <div class="line"></div>
      <el-menu
        v-if="this.category.length > 0"
        :default-active="this.activeIndex"
        class="el-menu-vertical-demo"
        router
        active-text-color="#428BD1"
        @select="handleSelect">
        <template v-for="(item, key) in this.category">
          <el-menu-item :index="'/category/'+item.id" :key="key">
                        <span>
                            <i class="el-icon-reading"></i>
                            <span>{{item.categoryName}}</span>
                        </span>
            <span class="opacity-5" style="float: right">{{item.count}}篇</span>
          </el-menu-item>
        </template>
      </el-menu>
      <div class="tc" v-else><span>暂无数据</span></div>
    </dl>
  </div>
</template>

<script>

  export default {
    name: "Category",
    props: {
      activeIndex: null,
      category: null
    },
    data() {
      return {}
    },
    methods: {
      handleSelect(index, indexPath) {
        this.$store.state.activeIndex = index
      },
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .el-menu {
    border-right: unset;
  }

  .el-menu-item {
    padding: 0;
  }

  .el-menu-item, .el-submenu__title {
    height: 25px;
    line-height: 25px;
  }

  .el-menu li {
    padding: 0 5px 0 0 !important;
    font-weight: 500;
    color: unset;
  }

  .el-menu-item [class^=el-icon-] {
    margin: 0;
    font-size: unset;
  }
</style>
